<!--
 * @Author: your name
 * @Date: 2023-08-15 20:48:43
 * @LastEditTime: 2023-08-16 23:10:12
 * @LastEditors: your name
 * @Description: 
-->
<template>
  <div class="data-screen">
    <dv-full-screen-container class="dv-full-screen-container">
      <!-- 标题 -->
      <TopHeader />
      <div class="screen-main">
        <!-- 左侧 -->
        <div class="screen-mask-left">
          <!-- 电器安全 -->
          <dv-border-box-11
            title="电器安全"
            style="height: 28vh"
            :color="['#3F96A5']"
            backgroundColor="rgba(255,255,255,0.1)"
          >
            <ScreenLeft1 />
          </dv-border-box-11>

          <!-- 设备管理 -->
          <dv-border-box-11
            title="设备管理"
            style="height: 28vh"
            :color="['#3F96A5']"
            backgroundColor="rgba(255,255,255,0.1)"
          >
            <ScreenLeft2 />
          </dv-border-box-11>

          <!-- 流程管理 -->
          <dv-border-box-11
            title="流程管理"
            style="height: 28vh"
            :color="['#3F96A5']"
            backgroundColor="rgba(255,255,255,0.1)"
          >
            <ScreenLeft3 />
          </dv-border-box-11>
        </div>

        <div class="screen-mask-center">
          <!-- <div class="center-top"></div> -->
          <ScreenCenter1 />
          <ScreenCenter2 />
          
        </div>

        <!-- 右侧 -->
        <div class="screen-mask-right">
          <!-- 事故管理 -->
          <dv-border-box-11
            title="事故管理"
            style="height: 28vh"
            :color="['#3F96A5']"
            backgroundColor="rgba(255,255,255,0.1)"
          >
            <ScreenRight1 />
          </dv-border-box-11>

          <!-- 教育培训 -->
          <dv-border-box-11
            title="教育培训"
            style="height: 28vh"
            :color="['#3F96A5']"
            backgroundColor="rgba(255,255,255,0.1)"
          >
            <ScreenRight2 />
          </dv-border-box-11>

          <!-- 应急管理 -->
          <dv-border-box-11
            title="应急管理"
            style="height: 28vh"
            :color="['#3F96A5']"
            backgroundColor="rgba(255,255,255,0.1)"
          >
            <ScreenRight3 />
          </dv-border-box-11>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
export default {
  components: {
    TopHeader: () => import("./components/topHeader.vue"),
    ScreenLeft1: () => import("./components/screenLeft1.vue"),
    ScreenLeft2: () => import("./components/screenLeft2.vue"),
    ScreenLeft3: () => import("./components/screenLeft3.vue"),
    ScreenRight1: () => import("./components/screenright1.vue"),
    ScreenRight2: () => import("./components/screenRight2.vue"),
    ScreenRight3: () => import("./components/screenRight3.vue"),
    ScreenCenter1: () => import("./components/screenCenter1.vue"),
    ScreenCenter2: () => import("./components/screenCenter2.vue"),
  },
};
</script>

<style scoped lang="scss">
.data-screen {
  width: 100%;
  height: 100vh;
  background: url("../../assets/bg.png") no-repeat 100% 100%;
  background-size:cover;
  .dv-full-screen-container {
    display: flex;
    flex-direction: column;
    .screen-main {
      flex: 1;
      padding: 2vh 1vw;
      display: flex;
      justify-content: space-between;

      .screen-mask-left,
      .screen-mask-right {
        width: 28vw;
      }

      .screen-mask-center {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
}
</style>